<template>
	<view class="main">
		<header-vue :back="true" title="发表评价"></header-vue>
		<view class="list">
			<view class="white-box" style="margin-top: 28rpx;">
				<view class="flex item">
					<image :src="IMAGE_URL + '/static/login/bg.png'"></image>
					<view class="flex column between start store-info">
						<view>
							<view class="flex start">
								<!-- <view class="tag font20">自营</view> -->
								<view class="font28 fontbold-500">巴旦木去核奶枣零食夹心</view>
							</view>
							<view class="sale-num font24">已选：日常保洁2小时</view>
						</view>
						<view class="flex between font20 num">
							<view class="flex price">
								<text class="font24">￥</text>
								<text class="font32">45</text>
								<text class="font24">/60分钟</text>
								<text class="font20" style="color: #999;margin-left: 12rpx;">一口价</text>
							</view>
							<view class="font24">X1</view>
						</view>
					</view>
				</view>
			</view>
			<view class="flex start white-box user" style="padding: 28rpx;">
				<image :src="IMAGE_URL + '/static/login/bg.png'" class="avatar"></image>
				<view>
					<view class="font28 fontbold-500">刘德华</view>
					<view class="flex info font24">
						<image :src="IMAGE_URL + '/static/mine/sex.png'" class="sex"></image>
						<view>52岁</view>
						<view class="line"></view>
						<view>河北保定</view>
					</view>
				</view>
			</view>
			<view class="white-box textarea-box">
				<view class="flex">
					<i class="iconfont icon-starFull"></i>
					<i class="iconfont icon-starFull"></i>
					<i class="iconfont icon-star"></i>
					<i class="iconfont icon-star"></i>
					<i class="iconfont icon-star"></i>
				</view>
				<view class="flex text font24">如果满意请给五星好评哦~</view>
				<view class="textarea-content">
					<view style="position: relative;">
						<textarea placeholder="写点想要说的话吧~" v-model="value" class="font24"></textarea>
						<view class="font24 txt-len">{{value.length}}/200</view>
					</view>
					<view class="flex column upload-img">
						<i class="iconfont icon-camera"></i>
						<view class="font20">上传照片</view>
					</view>
				</view>
			</view>
		</view>
		<view class="flex between fixed font36 fontbold-500">
			<view class="flex btn-buy" @click="addGoods('buy')">发布</view>
		</view>
	</view>
</template>

<script>
	import headerVue from '@/components/header.vue'
	import numBoxVue from '../../views/shop/components/numBox.vue'
	import {
		searchApi
	} from '../../api/modules/shop'
	import appConfig from '@/config/app.js'
	export default {
		data() {
			return {
				IMAGE_URL: appConfig.IMAGE_URL,
				params: {
					keyword: ''
				},
				tabIndex: 0,
				value: '',
				showModal: false
			}
		},
		components: {
			headerVue,
			numBoxVue,
		},
		mounted() {},
		methods: {
			goPage(url) {
				uni.navigateTo({
					url
				});
			},
		}
	}
</script>
<style lang="scss" scoped>
	.main {
		background: #F6F6F6;
	}

	.list {
		padding: 0 32rpx 100rpx;
		box-sizing: border-box;
		position: relative;
		z-index: 1;

		.status {
			margin: 28rpx 0;
		}
	}

	.color-gold {
		color: #DF9824 !important;
	}

	.icon-clock {
		font-size: 24rpx;
		color: #DF9824;
		margin-right: 4rpx;
	}

	.bg-box {
		height: 400rpx;
		background: linear-gradient(to bottom, #F3FAFF 0%, rgba(243, 250, 255, 0) 100%) !important;
		position: absolute;
		width: 100vw;
		left: 0;
		z-index: 0;
	}

	.white-box {
		background: $uni-bg-color;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.08);
		border-radius: 20rpx;
		padding: 28rpx 28rpx 16rpx 28rpx;
		box-sizing: border-box;
		margin-bottom: 28rpx;

		.title-icon {
			width: 32rpx;
			height: 24rpx;
			margin-right: 10rpx;
		}

		.store-title {
			padding-bottom: 28rpx;
		}

		.iconfont {
			margin-right: 4rpx;
		}

		image {
			width: 200rpx;
			height: 200rpx;
			border-radius: 16rpx;
			margin-right: 20rpx;
			flex-shrink: 0;
		}

		.price {
			color: $uni-text-color-red;
			align-items: baseline;
		}

		.item {
			padding-bottom: 28rpx;
		}

		.store-info {
			width: 100%;
			height: 200rpx;
			align-items: flex-start;

			.tag {
				padding: 0 8rpx;
				height: 28rpx;
				box-sizing: border-box;
				background: #DF9824;
				border-radius: 4rpx;
				margin-right: 8rpx;
				color: $uni-text-color-inverse;
			}

			.sale-num {
				color: $uni-text-color-grey;
				margin-top: 12rpx;
			}

			.num {
				color: $uni-text-color-grey1;
				width: 100%;
			}

			.icon-comment {
				margin-left: 26rpx;
			}
		}

		.color-666 {
			color: $uni-text-color-grey1;
		}

		.avatar {
			width: 88rpx;
			height: 88rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}

		.sex {
			width: 40rpx;
			height: 40rpx;
			margin-right: 12rpx;
		}

		.info {
			color: #999;
		}

		.line {
			height: 24rpx;
			width: 2rpx;
			background: #DDDDDD;
			margin: 0 12rpx;
		}

		.form-item {
			padding: 28rpx 0 12rpx 0;
			box-sizing: border-box;

			.icon-jiantou {
				margin-left: 8rpx;
				margin-right: 0;
			}

			.flex {
				width: 400rpx;
			}

			input {
				text-align: right;

				::v-deep .input-placeholder {
					color: #AAAAAA;
				}
			}
		}
	}

	.textarea-box {
		padding: 40rpx 28rpx 28rpx 28rpx;
		box-sizing: border-box;
		color: $uni-text-color-grey;

		.iconfont {
			font-size: 52rpx;
			margin-left: 28rpx;
			color: #CCCCCC;

			&:nth-child(1) {
				margin-left: 0;
			}
		}

		.icon-starFull {
			color: #F35452;
		}

		.text {
			margin: 28rpx 0 40rpx 0;
		}

		.textarea-content {
			padding: 20rpx;
			box-sizing: border-box;
			position: relative;
			color: $uni-text-color-grey;
			background: #FAFAFA;

			textarea {
				width: calc(100vw - 140rpx);
				height: 220rpx;
				background: #FAFAFA;
				border-radius: 8rpx;
				padding: 20rpx;
				box-sizing: border-box;
				width: 100%;
			}

			.txt-len {
				position: absolute;
				bottom: 32rpx;
				right: 40rpx;
			}

			.upload-img {
				width: 120rpx;
				height: 140rpx;
				border-radius: 8rpx;
				border: 1rpx solid #999999;
			}
		}
	}

	.fixed {
		position: fixed;
		width: 100%;
		z-index: 3;
		min-height: 88rpx;
		background: $uni-bg-color;
		padding: 0 32rpx;
		box-sizing: border-box;
		bottom: env(safe-area-inset-bottom);
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);

		.btn-buy {
			padding: 0 26rpx;
			height: 76rpx;
			border-radius: 60rpx;
			color: $uni-text-color-inverse;
			width: 100%;
			box-sizing: border-box;
			background: linear-gradient(90deg, #0785CF 0%, #25A4EF 100%);
			box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(7, 133, 207, 0.1);
		}
	}
</style>